<template>
	<om-page>
		<om-topbutton :hasBgColor="true" @click='searchTab'></om-topbutton>
		<uni-collapse :accordion="true" style="margin-top: 53px;">
			<uni-collapse-other-item :noClick="true" :title="getUserName" :unit="''" color="#333333" :showLength="false" :showArrow="false">
			</uni-collapse-other-item>
			<uni-collapse-other-item :noClick="true" :open="true"  title="剩余年假" :unit="''" color="#333333" :showLength="true" :showArrow="false" :text="(getAllDay?getAllDay:0)+'天'">
				<uni-collapse :accordion="true">
					<uni-collapse-other-item v-for="(item,index) in dataList" :key="index" :unit="''" color="#333333" class="margin-left" :title="item.year+'年剩余年假'" :text="(item.leftDay?item.leftDay:0)+'天'+(item.closeDate?'(已过期)':'')" :showLength="true" :showArrow="item.subList?true:false">
						<view class="margin-left" v-for="(subItem,subIndex) in item.subList" :key="subIndex">
							<view class="padding collapse-item-info info-border-bottom">
								<view class="om-font-size ">
									{{subItem.date +' 请年假'+subItem.usedDayStr}}
								</view>
								<view class="om-font-size collapse-item-info-button om-color">
									<view  class="padding-left" @click="itemClick(subItem)">
										去查看
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-other-item>
				</uni-collapse>
			</uni-collapse-other-item>
		</uni-collapse>
	</om-page>
</template>

<script>
	import {mapState} from 'pinia';
	import { useLoginUserStore } from '@/stores/login-user.js'
	import {getUrl} from '../../../static/js/common.js'
	export default{
		data(){
			return {
				dataList:[],
				cachename:"annual",
				userInfo:{
					userName:"",
					userId:""
				}
			}
		},
		computed:{
			...mapState(useLoginUserStore,["userId","userName"]),
			getAllDay(){
				let _that = this
				let days = ""
				for(let item of _that.dataList){
					if(item && item.allLeftDay){
						days = item.allLeftDay
					}
				}
				return days
			},
			getUserName(){
				return  this.userInfo.userName? this.userInfo.userName:this.userName
			}
		},
		methods:{
			searchTab() {
				let param = {
						url:'annualLeaveList/findSearchUserPage',
						msg:"考勤与薪资核算业务主管可以查所有人；其他上级可查下级！",
						cachename:this.cachename
				}
				let url = getUrl('../search/search',param)
				uni.navigateTo({
					url: url
				});
			},
			itemClick(item){
				let _that = this
				_that.om.getFormInfoByFileCode(item.formCode,item.busCode)
			},
			getAnnualList(userId){
				let _that = this
				_that.om.request(
					"wxAnnualList/getAnnualList",
					{
						userId: (userId?userId:_that.userId)
					}
				).then(res=>{
					if(res){
						_that.dataList = res
					}
				})
			}
		},
		onShow() {
			let _that = this
			uni.getStorage({
				key:_that.cachename,
				success:(res)=>{
					if(res.data){
						let d = res.data
						_that.userInfo.userName = d.username
						_that.userInfo.userId = d.id
						_that.getAnnualList(d.id)
					}
				},
				fail:(res)=>{
					_that.getAnnualList()
				}
			})
		},
		onUnload(){
				uni.removeStorage({
					key:this.cachename,
					success:(res)=>{}
				})
		},
		onLoad(){
			let _that = this
			uni.setNavigationBarTitle({
				title:"我的年假"
			})
		}
	}
</script>

<style scoped>
	.collapse-item-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.collapse-item-info-button{
		white-space: nowrap;
		border-left: 1px solid #EEEEEE ;
	}
	.info-border-bottom{
		border-bottom: 1px solid #EEEEEE;
	}
</style>                                                  
